<template>

	<view style="display: flex; flex-direction: column; flex:1;">
		<calendar :months="months" :value="value" @next="next" @prev="prev" :events="events" lunar clean @select="select" ref="calendar"
		 @selectMonth="selectMonth" @selectYear="selectYear" :arrowLeft="arrowLeft" :tileContent="tileContent" :almanacs="almanacs"
		 :firstWeekOfMonth="firstWeekOfMonth" @change="changeFirstWeekOfMonth"></calendar>

		<view>
			<button @click="setToday">返回今日</button>
			<button @click="dateInfo">日期信息</button>
			<button @click="renderer">重新渲染年月日期</button>
		</view>
	</view>
</template>

<script>
	import calendar from 'components/mpuve-calendar/src/school-calendar.vue';
	export default {
		data() {
			return {
				months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月',
					'十一月', '十二月'
				],
				disabledArray: ['2018-6-27', '2018-6-25'],
				value: [2018, 6, 7],
				begin: [2016, 1, 1],
				end: [2020, 1, 1],
				events: {
					'2018-6-7': '今日备注',
					'2018-6-8': '一条很长的明日备注'
				},
				almanacs: {
					'9-3': '抗战胜利日',
					'11-17': '学生日'
				},
				tileContent: [{
						date: '2018-9-22',
						className: 'holiday ',
						content: '休'
					},
					{
						date: '2018-9-23',
						className: 'holiday ',
						content: '休'
					}
				],
				// arrowLeft: arrowLeft
				arrowLeft: '',
				firstWeekOfMonth: 1, //当前月第一周序号
				firstWeekOfMonths: [[], [], ['寒假',1,2,3,4],[4,5,6,7,8,9], [9,10,11,12,13], [13,14,15,16,17], [17,18,19,20,'暑假','暑假'], ['暑假','暑假','暑假','暑假','暑假'], [], [], [], []], //当前学年每月第一天所在的周次，0表是不设置
			}
		},
		components: {
			calendar
		},
		onLoad() {
			// this.changeFirstWeekOfMonth(); 
		},
		methods: {
			changeFirstWeekOfMonth(month, year) {
				//更改日期可能改变当前月份的第一周，所以要重新计算
				//根据规则计算第一周，系统设置学期第一周的第一天的日期
				if (year === 2018) {
					this.firstWeekOfMonth = this.firstWeekOfMonths[month - 1];

				} else {
					this.firstWeekOfMonth = 0;
				}
        
				console.log(this.firstWeekOfMonths)
				console.log(this.firstWeekOfMonth)

			},
			selectMonth(month, year) {
				console.log(year, month)
			},
			prev(month) {

				console.log(month)
			},
			next(month) {

				console.log(month)
			},
			selectYear(year) {

				console.log(year)
			},
			setToday() {
				this.$refs.calendar.setToday();

			},
			dateInfo() {
				const info = this.$refs.calendar.dateInfo(2018, 6, 23);
				console.log(JSON.stringify(info));
			},
			renderer() {
				this.$refs.calendar.renderer(2018, 6); //渲染2018年8月份       
			},
			select(val, val2) {
				console.log(val)
				console.log(val2)
			}
		}
	}
</script>

<style>
	/* 	@import '../../components/mpuve-calendar/src/style.css' */

	page view {
		display: flex;
		flex-direction: row;
	}
</style>
